<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>基础动画</title>
    <style>
      .beat {
        transform-origin: bottom;
        animation: beat-scale 1.4s linear infinite;
      }

      @keyframes beat-scale {
        25% {
          transform: scaleY(0.3);
        }
        50% {
          transform: scaleY(1);
        }
        75% {
          transform: scaleY(0.3);
        }
      }

      /* 让三段线条交错运动 */
      .beat:nth-child(1) {
        animation-delay: 0.4s;
      }
      .beat:nth-child(2) {
        animation-delay: 0.2s;
      }
    </style>
  </head>
  <body>
    <svg height="0" width="0">
      <symbol id="beats" viewBox="0 0 100 100">
        <line
          class="beat"
          x1="15"
          y1="40"
          x2="15"
          y2="100"
          stroke="currentColor"
          stroke-width="10"
          stroke-linecap="round"
        ></line>
        <line
          class="beat"
          x1="50"
          y1="40"
          x2="50"
          y2="100"
          stroke="currentColor"
          stroke-width="10"
          stroke-linecap="round"
        ></line>
        <line
          class="beat"
          x1="85"
          y1="40"
          x2="85"
          y2="100"
          stroke="currentColor"
          stroke-width="10"
          stroke-linecap="round"
        ></line>
      </symbol>
    </svg>

    <span
      style="
        color: #ff6699;
        border: 1px solid #ff6699;
        border-radius: 5px;
        padding-left: 5px;
        font-size: 24px;
      "
    >
      <svg height="30" width="30">
        <use href="#beats"></use>
        <!--href="#beats"所指向的就是上面<symbol>标签的id-->
      </svg>
      <span>直播中</span>
    </span>
  </body>
</html>
